.page-hd{
    font-size: 40px;
    color: $dev-color-active;
    line-height: 2;
    font-weight: normal;
    text-align: center;
    margin-bottom: 60px;
}
.page-about{
    padding: 60px 120px;
    margin-bottom: 66px;
    background-color: #fff;
    .company-profile{
        >p{
            font-size: 14px;
            color: #666;
            line-height: 2;
            margin-top: 10px;
            margin-bottom: 30px;
            text-indent: 2em;
        }
    }
    .company-history{
        width: 100%;
        height: 800px;
        overflow: hidden;
        padding: 20px 20px 0;
        .flipbook-viewport .shadow{
            -webkit-transition: -webkit-box-shadow 0.5s;
            -moz-transition: -moz-box-shadow 0.5s;
            -o-transition: -webkit-box-shadow 0.5s;
            -ms-transition: -ms-box-shadow 0.5s;
            -webkit-box-shadow:0 0 20px #ccc;
            -moz-box-shadow:0 0 20px #ccc;
            -o-box-shadow:0 0 20px #ccc;
            -ms-box-shadow:0 0 20px #ccc;
            box-shadow:0 0 20px #ccc;
        }
        .flipbook{
            .item-page{
                background-size: cover;
                background-repeat: no-repeat;
            }
        }
        .bottom{
            margin-top:36px;
            overflow: hidden;
            height: 100px;
            position: relative;
        }
    }
    .time-axis{
        @extend .clearfix;
        position: absolute;
        white-space: nowrap;
        left: 0;
        top: 0;
        >li{
            display: inline-block;
            width: 150px;
            text-align: center;
            line-height: 24px;
            position: relative;
            color: #666;
            cursor: pointer;
            span{
                display: block;
                font-size: 14px;
            }
            .node{
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -6px;
                margin-top: -6px;
                z-index: 2;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                border: 2px solid #999;
                background-color: #fff;
            }
            time{
                display: block;
                font-size: 12px;
                margin-top: 32px;
            }
            i{
                position: absolute;
                right: 50%;
                top: 50%;
                width: 150px;
                height: 1px;
                background-color: #999;
                z-index: 0;
            }
            &:first-child{
                i{
                    display: none;
                }
            }
            &.on{
                color: $dev-color-active;
                .node{
                    background-color: $dev-color-active;
                    border-color: #fff;
                    &:after{
                        content: "";
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        width: 14px;
                        height: 14px;
                        margin-left: -7px;
                        margin-top: -7px;
                        border: 1px solid $dev-color-active;
                        border-radius: 50%;
                        box-sizing: border-box;
                    }
                }
                i{
                    //background-color: $dev-color-active;
                }
            }
        }
    }
}
.page-core{
    padding: 60px;
    margin-bottom: 80px;
    background-color: #fff;
    .core-team{
        overflow: hidden;
        >li{
            float: left;
            width: 247px;
            margin-right: 30px;
            text-align: center;
            &:last-child{
                margin-right: 0;
            }
            >img{
                width: 125px;
                height: 125px;
            }
        }
    }
    .leader-name{
        font-size: 20px;
        color: #333;
        line-height: 1.2;
        margin-top: 12px;
        display: block;
    }
    .leader-title{
        font-size: 16px;
        line-height: 1.2;
    }
    .leader-intro{
        margin-top: 26px;
        font-size: 14px;
        line-height: 24px;
        color: #333;
        text-align: left;
        >li{
            position: relative;
            padding-left: 20px;
        }
        >li:before{
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            width: 6px;
            height: 6px;
            background-color: #333;
            border-radius: 50%;
        }
    }
    
}

.page-culture{
    margin-bottom: 76px;
    .culture-gird{
        overflow: hidden;
        >li{
            width: 183px;
            height: 183px;
            margin-right: 20px;
            margin-bottom: 20px;
            display: table;
            overflow: hidden;
            float: left;
            >img{
                display: block;
                width: 100%;
                height: 100%;
                transition: all 0.3s linear;
            }
            &:nth-child(6){
                margin-right: 0;
            }
        }
        .inner{
            display: table-cell;
            vertical-align: middle;
            width: 100%;
            height: 100%;
            border: 2px solid #006935;
            background-color: #006935;
            color: #fff;
            text-align: center;
            >span{
                font-size: 16px;
                line-height: 24px;
            }
            >h4{
                font-size: 26px;
                font-weight: normal;
                line-height: 40px;
                margin-top: 4px;
                margin-bottom: 10px;
            }
            p{
                font-size: 14px;
                line-height: 24px;
            }
        }
        li:hover>.inner{
            background: #eee;
            color: #006935;
        }
        li:hover>img{
            transform: scale(1.1);
        }
    }
    
}
.page-contact{
    background-color: #fff;
    margin-bottom: 64px;
    padding: 60px 120px 80px;
    .module-box{
        p{
            font-size: 14px;
            color: #666;
            line-height: 30px;
        }
        .icon-qq{
            display: inline-block;
            vertical-align: middle;
            width: 28px;
            height: 28px;
            text-align: center;
            border-radius: 50%;
            position: relative;
            padding-top: 2px;
            background-color: $dev-color-active;
            &:before{
                content: "";
                display: inline-block;
                height: 24px;
                width: 21px;
                background: url(../../img/home/home-icons.png) no-repeat -136px -156px;
                -webkit-transform: scale(0.7);
                -ms-transform: scale(0.7);
                transform: scale(0.7);
            }
        }
    }
    .map-area{
        width: 100%;
        margin-top: 40px;
        >img{
            width: 100%;
        }
    }
}
.page-join{
    margin-bottom: 100px;
    .call-up{
        padding: 60px 120px 70px;
        background-color: #fff;
        text-align: center;
        >h2{
            font-size: 40px;
            line-height: 2;
            color: $dev-color-active;
            margin-bottom: 14px;
            text-align: center;
            font-weight: normal;
        }
        >p{
            font-size: 16px;
            color: #333;
            line-height: 28px;
        }
        .tac{
            display: inline-block;
            text-align: left;
            font-size: 16px;
            color: #333;
            line-height: 28px;
            >span{
                display:block;
            }
        }
    }
    .recruit-sec{
        padding: 50px 120px 70px;
        margin-top: 30px;
        position: relative;
        background-color: #fff;
    }
    .job-title{
        color: $dev-color-active;
        font-size: 24px;
        line-height: 44px;
        padding-bottom: 10px;
        border-bottom: 2px dashed #eee;
    }
    .btn-mailing{
        display: inline-block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        border-radius: 40px;
        background-color: $dev-color-active;
        position: absolute;
        right: 120px;
        top: 52px;
    }
    .job-info{
        margin-top: 40px;
        overflow: hidden;
        .col-left{
            float: left;
            width: 436px;
        }
        .col-right{
            float: right;
            width: 470px;
        }
        ol{
            margin-bottom: 30px;
        }
        ol>li{
            font-size: 14px;
            line-height: 2;
            color: #333;
            padding-left: 22px;
            text-indent: -22px;
        }
        h4{
            font-size: 16px;
            color: #333;
            line-height: 30px;
            font-weight: 400;
        }
    }
    
}

